import React,{useEffect} from 'react'
import { Swiper, Toast } from 'react-vant';
import {SwiperModule}  from '../SwiperModule';
import './index.scss';
import { _getBanner } from '../../../api/recommend'
export const BannerList = props => {
    const [bannerImg, setBannerImg] = React.useState(['']);
    const swpierItems =  bannerImg.map((item, index) => (
        <Swiper.Item key={index}>
            <div className='img_box'>
                <img src={item.pic+'?param=500y500'} />
            </div>
        </Swiper.Item>
    ))
    useEffect(() => {
        _getBanner().then(res=>{
            setBannerImg(res.banners)
        }).catch(err => { Toast.info(err.msg || err.message || '网络错误，请稍后再试') })
    }, [])
    return (
        <div className="banner_list">
            <SwiperModule swpierItems={swpierItems}  autoplay={3000} />
        </div>
    )
}
